<script setup lang="ts" name="contentMain">
import useContentMain from '@/components/index/hooks/contentMain'
const {
  selectData,
  selector,
  isShowSelector,
  showSelector,
  closeSelector,
  handleClick,
  tagsVisible,
  cardData,
  TagSelector,
  ContentTitle
} = useContentMain()
defineExpose({ showSelector })
</script>

<template>
  <div id="main-content">
    <div id="main-content-left">
      <section ref="selector" v-show="isShowSelector" class="selector">
        <!-- select 筛选 -->
        <div>
          <img @click="closeSelector" src="@/components/icons/close.svg" />
        </div>
        <ul>
          <li v-for="item in selectData" :key="item.id">
            <span @click="handleClick(item.id)">{{ item.value }}</span>
            <button @click="cardData.reverse()">↥↧</button>
          </li>
        </ul>
      </section>
      <div id="main-content-msg">
        <div id="main-msg">
          <!-- left -->
          <router-view name="left"> </router-view>
          <component v-show="tagsVisible" :is="TagSelector"></component>
        </div>
        <div id="main-content-display">
          <ContentTitle />
          <!-- center -->
          <div class="">
            <router-view name="center"> </router-view>
          </div>
        </div>
      </div>
    </div>
    <div id="main-content-right">
      <!-- right -->
      <router-view name="right"> </router-view>
    </div>
  </div>
</template>

<style scoped lang="less">
#main-content {
  width: max(1200px, 100%);
  min-height: calc(100vh - 60px);
  display: flex;
  gap: 6px;

  #main-content-left {
    flex: 1;
    width: 1000px;
    section {
      height: 48px;
    }
    .selector {
      margin-top: 2px;
      height: 48px;
      background-color: var(--color1);
      border-radius: 0 0 var(--radius) var(--radius);
      box-shadow: 0 2px 2px 0 var(--color1);
      border: 2px solid var(--color1);
      box-sizing: border-box;
      display: flex;
      align-items: center;

      div {
        flex: 0 0 1;
        width: 220px;
        position: relative;
        img {
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 5%;
          translate: 0 -50%;
          width: 28px;
          height: 28px;
        }
      }
      ul {
        flex: 1;
        width: 800px;
        padding: 8px 0;
        > .select-main > label:hover {
          cursor: pointer;
        }
        > .select-main {
          float: right;
          input[type='checkbox'] {
            width: 16px;
            height: 16px;
            vertical-align: middle;
          }
          background-color: var(--color1);
          label {
            display: inline-block;
            vertical-align: middle;
            height: 32px;
            width: 100px;
            line-height: 32px;
            text-align: center;
            color: #fff;
          }
        }

        > li:hover {
          cursor: pointer;
          > button {
            cursor: pointer;
          }
        }
        li {
          list-style: none;
          float: left;
          border-radius: var(--radius);
          overflow: hidden;
          background-color: var(--color2);
          margin: 0 8px;
          > span {
            display: inline-block;
            vertical-align: middle;
            height: 32px;
            width: 100px;
            line-height: 32px;
            text-align: center;
            color: #fff;
          }

          > button {
            vertical-align: middle;
            height: 32px;
            width: 24px;
            border: none;
            color: var(--color-font);
          }
        }
      }
    }
    #main-content-msg {
      display: flex;
      gap: 6px;

      #main-msg {
        padding-top: 56px;
        width: 220px;
        box-sizing: border-box;
      }
      #main-content-display {
        margin-top: 6px;
        flex: 1;
        min-width: 800px;
        min-height: calc(100vh - 96px);
        box-sizing: border-box;
        background-color: var(--color1);
        border-radius: var(--radius);
        > div {
          padding: 10px;
        }
      }
    }
  }
  #main-content-right {
    padding-top: 56px;

    width: 220px;
  }
}
</style>
